How to add reading progress bar in blogger? 2022
In this blog, you will learn how to add a reading progress bar in blogger. It has been a trend in all blogging platforms to show the progress of posts that blog visitors read.
In brief, you will need to add a piece of HTML code to the template of your blogger blog. Before we start adding the progress bar to your blog, it is a good idea to learn about it and its importance for your blog.
What is a progress bar?
A progress bar is a graphical representation of the progress of a task. It is usually implemented using a horizontal bar with a fill-in (or some other indicator) of where it is in the process. A progress bar can be implemented using HTML, JavaScript, or some other blogger plugins.
What is a reading progress bar?
A Reading progress bar, also known as an article progress bar, shows the percentage of how much of an article or webpage has been read, or how much time did the reader spend. Reading Bar is also an indicator of the total time reader spend. There are a few ways to add this bar to a blogger website or a webpage. In this blog, we will see how to add a reading progress bar to the BlogSpot site. But before that you must know why is it important.
Reading progress bars why it matters?
We all want to know the time after which we will get through the article post. Reading progress indicator is a very useful design pattern, which makes your readers more comfortable and confident, and thereby boosts the conversion rate of your website. Such scroll progress bars give a premium and fancy look to your blogger site. After all there are limitations of blogger unlike WordPress. We don't have plug-ins like WordPress.org for every feature.
Why would a visitor pay time to your blog? Even if you don't have great content but an attractive site then this may reduce the bounce rate. Consequently increasing your search engine ranking.
How to add a reading progress bar?
Steps to add it
Copy the below Javascript and paste it above </body> the tag
<script>window.onscroll = function() {myFunction()};
function myFunction(){var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";}</script>
After that copy the below CSS and paste it above the ]]></b:skin>
.progress-container{width:100%;position:fixed;z-index:99}.progress-bar{height:5px;background:#F86152}Paste the HTML code just below the <body> tag (In some blogger templates this tag might be present with class or schema)
<div class='progress-container'>
<div class='progress-bar' id='myBar'/>
</div>Customize your progress bar
Conclusion
Adding a scroll progress on blogger site not only gives an elegant look but also increases your conversions We hope this article has been helpful to you. If you have any questions, regarding this post you can leave a comment below, send an email to us by visiting our contact page.
Also, if you found this article helpful, please feel free to share it with others on your favorite social media channel.
Post a Comment